<template>
  <div v-show="show" :transition="transition" class="message-box">
    <div class="modal" @click.self="clickMask">
        <div class="mint-msgbox">
            <!--Header-->
            <span class="close" v-if="close" @click.stop.prevent="closeMsgBox">
                <i class="fa fa-times" aria-hidden="true"></i>
            </span>
            <div class="modal-header">
                <h4 class="modal-title">
                    {{title}}
                </h4>
            </div>
            <!--Container-->
            <div class="mint-msgbox-content">
                <slot></slot>
            </div>
            <!--Footer-->
            <div class="mint-msgbox-btns" v-if="isMsgBtn">
                <button class="mint-msgbox-btn mint-msgbox-cancel col-xs-6 col-md-6"
                        v-if="cancelText" @click.stop.prevent="cancel">{{cancelText}}</button>
                <button class="mint-msgbox-btn mint-msgbox-confirm col-xs-6 col-md-6"
                        v-if="confirmText" @click.stop.prevent="ok">{{confirmText}}</button>
            </div>
        </div>
    </div>
    <div class="modal-backdrop in"></div>
</div>
</template>

<script>
export default {
  name: 'mt-message-box',
  props: {
        show: {
            type: Boolean,
            default: false
        },
        isMsgBtn: {
           type: Boolean,
            default: true
        },
        close: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        cancelText: {
            type: String,
            default: ''
        },
        confirmText: {
            type: String,
            default: ''
        },
        // 为true时无法通过点击遮罩层关闭modal
        force: {
            type: Boolean,
            default: false
        },
        // 自定义组件transition
        transition: {
            type: String,
            default: 'modal'
        },
        // 点击确定时关闭Modal
        // 默认为false，由父组件控制prop.show来关闭
        closeWhenOK: {
            type: Boolean,
            default: false
        }
    },
    data: function () {
        return {
            duration: null
        }
    },
    created: function () {
        if (this.show) {
            document.body.className += ' modal-open'
        }
    },
    beforeDestroy: function () {
        document.body.className = document.body.className.replace(/\s?modal-open/, '')
    },
    watch: {
        show: function (val, oldVal) {
            if (val) {
                document.body.className += ' modal-open'
            } else {
                if (!this.duration) {
                    this.duration = window.getComputedStyle(this.$el)['transition-duration'].replace('s', '') * 1000
                }
                setTimeout(function () {
                    document.body.className = document.body.className.replace(/\s?modal-open/, '')
                }, this.duration || 0)
            }
        }
    },
    methods: {
        ok: function () {
            this.$emit('ok')
        },
        cancel: function () {
            this.$emit('cancel')
        },
        closeMsgBox: function () {
            this.$emit('closeMsgBox')
        },
        clickMask: function () {
            if (!this.force) {
                this.cancel()
            }
        }
    }
}
</script>

<style lang="scss" rel="stylesheet/scss">
.message-box{
    .modal {
        display: block;
    }
    .mint-msgbox{
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
        background-color: #fff;
        width: 85%;
        border-radius: 3px;
        font-size: 16px;
        -webkit-user-select: none;
        overflow: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: .2s;
        transition: .2s;
    }
    .modal-transition {
        transition: all .6s ease;
    }
    .modal-title{
        text-align: center;
        color:#333;
    }
    .modal-header{
        position: relative;
        padding: 15px 0 0;
        border-bottom:none;
    }
    .close{
        position: absolute;
        top:5px;
        left:10px;
        z-index: 1;
    }
    .modal-leave {
        border-radius: 1px !important;
    }
    .modal-transition .modal-dialog, .modal-transition .modal-backdrop {
        transition: all .5s ease;
    }
    .modal-enter .modal-dialog, .modal-leave .modal-dialog {
        opacity: 0;
        transform: translateY(-30%);
    }
    .modal-enter .modal-backdrop, .modal-leave .modal-backdrop {
        opacity: 0;
    }
    .mint-msgbox-input{
        padding-top:0;
        height:26px;
    }
    .mint-msgbox-input input {
        border: 1px solid #dedede;
        border-radius: 5px;
        padding: 4px 5px;
        width: 100%;
        appearance: none;
        outline: none;
    }
    .mint-msgbox-box {
        padding: 10px 20px 15px;
    }
    .mint-msgbox-btns {
        height: 40px;
        line-height: 40px;
    }
    .mint-msgbox-btn {
        line-height: 35px;
        background-color: #fff;
        margin: 0;
        border: 0;
        &:focus{
            outline: none;
        }
        &:active{
            background-color: #fff;
        }
    }
    .mint-msgbox-cancel {
        border-right: 1px solid #ddd;
        &:active{
            color: #000;
        }
    }
    .mint-msgbox-confirm {
        color: #26a2ff;
        &:active{
            color: #26a2ff;
        }
    }
}

</style>
